<template>
  <div class="app-container">
    <div class="container">
      <!--工具栏-->
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
        <div class="head-container">
          <strong>攻略设置</strong>
          <el-divider/>
        </div>
        <el-form-item label="攻略标题：" class="spot" prop="title">
          <el-input v-model="form.title"/>
        </el-form-item>
        <el-form-item label="攻略封面：" prop="strategy_img" class="avatar-uploader">
          <el-upload
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :action="userHeadUploadApi"
            class="avatar-uploader">
            <img v-if="form.strategy_img" :src="form.strategy_img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <div style="color:#ccc;font-size:14px;">只能上传一张图片,图片大小不能超过3MB</div>
        </el-form-item>
        <el-form-item label="攻略详情：" prop="details">
          <editor ref="editor" :form="form.details" @saveContent="saveContent"/>
        </el-form-item>
        <el-form-item class="footer">
          <el-button size="small" @click="back">取消</el-button>
          <el-button type="primary" size="small" @click="onsubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import editor from './editor'
import Cookies from 'js-cookie'
import { insertStrategy, updateStrategy, getStrategyInfo } from '@/api/mall/strategy'
export default {
  components: { editor },
  data() {
    return {
      company_id: Cookies.get('company_id'),
      form: {
        strategy_img: '',
        title: '',
        details: ''
      },
      rules: {
        title: [{ required: true, message: '请输入攻略标题', trigger: 'blur' }],
        details: [{ required: true, message: '请输入攻略详情', trigger: 'blur' }],
        strategy_img: [{ required: true, message: '请输入攻略封面', trigger: 'blur' }]
      },
      type: '' // 1新增 2编辑
    }
  },
  computed: {
    ...mapGetters([
      'userHeadUploadApi'
    ])
  },
  created() {
    this.type = this.$route.query.type
    if (this.type === 2) {
      // this.form = JSON.parse(Cookies.get('strategy'))
      getStrategyInfo(this.$route.query.strategy_id).then(res => {
        console.log(res)
        this.form = res
      })
    }
  },
  methods: {
    saveContent(r) {
      // 富文本内容
      this.form.details = r
    },
    handleAvatarSuccess(res, file) {
      this.form.strategy_img = file.response
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 3

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
      }
      return isJPG && isLt2M
    },
    onsubmit() {
      // 获取组件富文本内容，
      this.$refs.editor.saveContent()
      // 提交
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.type === 1) {
            this.insertStrategy(this.form)
          } else {
            this.updateStrategy(this.form)
          }
        }
      })
    },
    insertStrategy(data) {
      insertStrategy(data).then(res => {
        this.$notify({
          title: '新增成功',
          type: 'success',
          duration: 2500
        })
        this.back()
      }).catch(res => {

      })
    },
    updateStrategy(data) {
      updateStrategy(data).then(res => {
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.back()
      }).catch(res => {

      })
    },
    back() {
      this.$router.push({ path: '/chaomall/system/strategy' })
    }
  }
}
</script>
<style>
  .item {
    display: inline-block;
  }
  .check {
    display: inline-block;
  }
  .footer {
    padding-left: 500px;
    margin-bottom: 30px;
  }
  .el-icon-circle-plus {
    color: #409EFF;
  }
  .spot {
    width: 600px;
  }
  .spanOneLine {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .disabled .el-upload--picture-card {
    display: none;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .avatar-uploader >>> .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 120px;
    background-color: #fafafa;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
</style>
